<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>系统设置</title>
<link rel="stylesheet" href="/bootstrap-3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/config.css">

<link rel="icon" href="favicon.png" type="image/png"/>

<script src="/script/jquery-1.10.2.js"></script>
<script src="/bootstrap-3.3.5/js/bootstrap.min.js"></script>

<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>

</head>

<body>

<div id="header">
<nav class="navbar navbar-default navbar-fixed-top">
	<div class="container">
	
	    <div class="navbar-header">
	        <img alt="Brand" src="/image/logo.png">
	    </div>
    	
	 	<ul class="nav navbar-nav">
	 		<li><a>高清编码器配置操作平台</a></li>
	 	</ul>
 	
	 	<ul class="nav navbar-nav navbar-right">
	      <li><a href="support.html">更多服务与支持</a></li>
	    </ul>
 	
	</div>
</nav>
</div>

<div class="container">
	<div class="page-header text-center">
		<h3>系统设置</h3>
	</div>
    <div class="panel panel-default">
	  <div class="panel-heading">修改密码</div>
	  <div class="panel-body">
	    <div class="form-horizontal">
			<div class="form-group">
				<label for="inputEmail3" class="col-sm-2 control-label">新用户名</label>
				<div class="col-sm-5">
					<input type="text" class="form-control" placeholder="新用户名" id="text-user">
				</div>
			</div>
			<div class="form-group">
				<label for="inputEmail3" class="col-sm-2 control-label">新密码</label>
				<div class="col-sm-5">
					<input type="password" class="form-control" placeholder="新密码" id="text-password">
				</div>
			</div>
			<div class="form-group">
				<label for="inputEmail3" class="col-sm-2 control-label">确认新密码</label>
				<div class="col-sm-5">
					<input type="password" class="form-control" placeholder="确认新密码" id="text-password-confirm">
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button class="btn btn-primary" onclick="changeUser()">修改</button>
				</div>
			</div>
			
		</div>
	  </div>
	</div>

	<div class="panel panel-default">
	  <div class="panel-heading">系统信息</div>
	  <div class="panel-body">
	    <div class="form-horizontal">
			<div class="form-group">
				<label for="inputEmail3" class="col-sm-2 control-label">设备序列号</label>
				<div class="col-sm-5">
					<input type="text" class="form-control" placeholder="设备序列号" readonly="readonly" id="text-seq">
				</div>
			</div>
			<div class="form-group">
				<label for="inputEmail3" class="col-sm-2 control-label">软件版本号</label>
				<div class="col-sm-5">
					<input type="text" class="form-control" placeholder="软件版本号" readonly="readonly" id="text-soft">
				</div>
			</div>
			<div class="form-group">
				<label for="inputEmail3" class="col-sm-2 control-label">硬件版本号</label>
				<div class="col-sm-5">
					<input type="text" class="form-control" placeholder="硬件版本号" readonly="readonly" id="text-hard">
				</div>
			</div>
		</div>
	  </div>
	</div>

	<div class="panel panel-default">
	  <div class="panel-heading">升级设置</div>
	  <div class="panel-body">
	    <div class="form-horizontal">
			<div class="form-group">
				<label for="inputEmail3" class="col-sm-2 control-label">升级系统</label>
				<div class="col-sm-5">
					<input id="fileupload" type="file" name="update"  multiple>
				</div>
				<div class="col-sm-5 text-warning">
					(请勿多人同时上传，请勿断电，刷新网页)
				</div>
			</div>
			
			<div class="form-group">
				<label for="inputEmail3" class="col-sm-2 control-label"></label>
				<div class="col-sm-5">
					<input id="filetxt" type="text" placeholder="文件名称" class="form-control" readonly="readonly"/>
				</div>
				<div class="col-sm-5 text-warning">
					<span id="upload-progress">上传进度: </span>
				</div>
			</div>
			
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10" id="btn-panel">
					<button class="btn btn-primary" id="btn-upload">上传</button>
				</div>
			</div>
		</div>
	  </div>
	</div>

	<div class="panel panel-default">
	  <div class="panel-heading">系统设置</div>
	  <div class="panel-body">
	    <div class="form-horizontal">
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-2">
					<button class="btn btn-primary" onclick="rebootSystem()" id="btn-reboot">重启</button>
				</div>
				<div class="col-sm-offset-1 col-sm-2">
					<button class="btn btn-warning" onclick="resetSystem()" id="btn-reset">重置</button>
				</div>
			</div>
		</div>
	  </div>
	</div>
</div>

<footer id="footer">
	<nav class="navbar navbar-default navbar-fixed-bottom">
	   <div class="center">
	      <ul class="nav navbar-nav">
	         <li><a href="index.html">状态显示</a></li>
	         <li><a href="network.html">网络设置</a></li>
	         <li><a href="master-video.html">主流编码设置</a></li>
	         <li><a href="sub-video.html">副流编码设置</a></li>
	         <li><a href="audio.html">音频编码设置</a></li>
	         <li><a href="system.html">系统设置</a></li>
	      </ul>
	   </div>
	   
	   	<div class="container center">
		<a href="#">高清编码器配置操作平台</a>
		</div>
	</nav>

</footer>


<script type="text/javascript">

$(document).ready(function() {
	$("#footer li:eq(5)").addClass("active");
	  
	$.getJSON(getBaseUri() + '/api/sysinfo', function(data) {
		var sysinfo = data;
		
		$("#text-seq").val(sysinfo.devSeq);
		$("#text-soft").val(sysinfo.softVersion);
		$("#text-hard").val(sysinfo.hardVersion);
	});
	
	initUpload();
	
});

function initUpload() {
	$("#btn-upload").attr("disabled", "disabled");
	
	$('#fileupload').fileupload({
    	url: "upload/",
   	
    	add: function (e, data) {
    		$("#filetxt").val(data.files[0].name);
    		
    		$("#btn-upload").attr("disabled", false);
    		$("#btn-upload").unbind();
    		
    		$("#fileupload").attr("disabled", "disabled");
			
			$("#btn-reboot").attr("disabled", "disabled");
			$("#btn-reset").attr("disabled", "disabled");
    		
            data.context = $("#btn-upload");
            $("#btn-upload").click(function (){
            	data.submit();
            	$("#btn-upload").attr("disabled", "disabled");
            });
        },
        
        progress: function (e, data) {
        	var progress = parseInt(data.loaded / data.total * 100, 10);
        	$("#upload-progress").text("进度: " + progress + "%");
			
			if (progress == 100) {
				$("#upload-progress").text("开始烧写FLASH, 费时需几分钟, 请耐心等待!");
			}
        },
        
        done: function (e, data) {
        	console.log(data);
        	
        	$("#filetxt").val("");
        	$("#fileupload").attr("disabled", false);
        	
			$("#btn-reboot").attr("disabled", false);
			$("#btn-reset").attr("disabled", false);

			
			alert("系统升级完毕.");
        }
    });
}

function getBaseUri() {
	var baseUri="http://" + window.location.host;
	return baseUri;
}

function changeUser() {
	var password = $("#text-password").val();
	var password2 = $("#text-password-confirm").val();
	if (password != password2) {
		//jAlert('2次输入的密码不一致!', '错误');
		alert("2次输入的密码不一致!");
		return;	
	}
	
	var user = {
		user: $("#text-user").val(),
		password: $("#text-password").val()
	};
	
	if (!user || !password) {
		alert("用户名/密码不能为空!");
		return;
	}
	
	var content = user;
	$.post(getBaseUri() + '/sys/password', content, function(data){
		alert("修改用户成功");
	});
	
}

function uploadFile() {
	return false;
}

function resetSystem() {
	var content = "";
	$.post(getBaseUri() + '/api/reset', content, function(data){
		alert("重置参数成功");
	});
}

function rebootSystem() {
	var content = "";
	$.post(getBaseUri() + '/api/reboot', content, function(data){
		alert("重启成功");
	});
}

</script>


</body>
</html>